<!-- 选择人员组件 非弹窗
	@desc 多选
 -->
<template>
  <view :style="{ marginTop: tarbarHeight }">
    <view style="padding-bottom: 160rpx">
      <u-collapse>
        <!-- 手风琴headImageUr1 -->
        <u-collapse-item
          v-for="(item, index) in dataList"
          :key="index"
          :title="item.o_OrganName"
          class="department"
          :name="index"
        >
          <u-icon
            name="star-fill"
            size="20"
            slot="icon"
            :color="color"
            class="el-icon-star-on star"
            @click.native="selectAll(item, index)"
            :class="{ active: item.active }"
          ></u-icon>
          <u-list :height="'auto'">
            <u-list-item
              v-for="(elItem, elIndex) in item.personList"
              :key="elIndex"
            >
              <u-cell
                :title="elItem.p_PersonName + ' ' + elItem.p_Telphone"
                @click="selectPerson(elItem)"
              >
                <base-avatar
                  slot="icon"
                  shape="square"
                  size="35"
                  :text="
                    elItem.p_PersonName ? elItem.p_PersonName.slice(-2) : ''
                  "
                  bg-color="#3c9cff"
                  color="#ffffff"
                  font-size="10"
                  :src="elItem.headImageUrl"
                  customStyle="margin: -3px 5px -3px 0"
                ></base-avatar>
                <u-icon
                  name="checkbox-mark"
                  slot="right-icon"
                  size="20"
                  :color="color"
                  class="el-icon-star-on star"
                  :class="{ active: elItem.active }"
                ></u-icon>
              </u-cell>
            </u-list-item>
          </u-list>
        </u-collapse-item>
      </u-collapse>
    </view>
    <view class="bottomPage">
      <view style="width: 58%; font-weight: 600"
        >已选 {{ selectedDataList.length }} 人</view
      >
      <u-button
        text="确认"
        type="primary"
        size="normal"
        style="width: 35%"
        @click="personConfirmClick"
      ></u-button>
    </view>
    <base-tarbar ref="baseTarbar" :pageTitle="'选择人员'"></base-tarbar>
    <u-loading-page :loading="personLoading"></u-loading-page>
  </view>
</template>

<script>
import baseAvatar from "@/components/baseAvatar/index.vue";
import { PersonList, GetOrganTree } from "@/api/system/basePerson";
import baseTarbar from "@/components/baseTarbar/index.vue";
import config from "@/config";
import { getUserInfo } from "@/utils/auth";
export default {
  components: {
    baseAvatar,
    baseTarbar,
  },
  onReady() {
    this.$refs.baseTarbar.currentEnvironment();
    if (this.$refs.baseTarbar.isOther) {
      this.tarbarHeight = "88rpx";
    }
  },
  watch: {
    selectedDataList: {
      deep: true, //深度监听设置为 true
      handler: function (newV, oldV) {
        this.dataList.forEach((el) => {
          let personNum = 0;
          el.personList.forEach((personEl) => {
            if (personEl.active) {
              personNum = personNum + 1;
            }
          });
          if (personNum == 0) {
            el.active = false;
          } else {
            el.active = true;
          }
        });
      },
    },
    dataList: {
      deep: true, //深度监听设置为 true
      handler: function (newV, oldV) {
        let selectedDataList = [];
        newV.forEach((el) => {
          el.personList.forEach((item) => {
            if (item.active) {
              selectedDataList.push(item);
            }
          });
        });
        this.selectedDataList = selectedDataList;
      },
    },
  },
  data() {
    return {
      dataList: [],
      selectedDataList: [],
      personLoading: false,
      color: "f0f0f0",
      configData: {},
      tarbarHeight:"",
    };
  },
  mounted() {
    this.openDialog();
  },
  methods: {
    // 打开弹窗
    openDialog(selectedDataList = [], type) {
      this.configData = config;
      this.selectedDataList = [];
      this.getMenuData(selectedDataList);
    },
    // 人员确定
    personConfirmClick() {
      this.$store.commit("SET_SELECTSDATA", this.selectedDataList);
      uni.navigateBack({
        delta: 1, //* 返回上一页
      });
    },
    closePersonClick() {
      uni.navigateBack({
        delta: 1, //* 返回上一页
      });
    },
    // 获得组织图
    async getMenuData(selectedDataList) {
      this.personLoading = true;
      setTimeout(() => {
        this.personLoading = false;
      }, 5000);
      let params = {
        CompanyID: getUserInfo().companyID,
      };

      let res = await GetOrganTree(params);
      let dataList = JSON.parse(res.data[0]);

      let departmentList = [];

      function setDepartmentList(data) {
        data.forEach((item) => {
          let arr = {
            o_OrganName: item.label,
            personList: [],
            active: false,
          };
          departmentList.push(arr);
          if (item.children && item.children.length > 0) {
            setDepartmentList(item.children);
          }
        });
      }
      setDepartmentList(dataList);
      this.getPersonList(departmentList, selectedDataList);
      this.personLoading = false
    },
    // 获得人员列表
    async getPersonList(departmentList, selectedDataList) {
      let params = {
        page: "1",
        limit: "999",
        departmentID: "",
      };
      let res = await PersonList(params);
      if (res.code === 1) {
        departmentList.forEach((el) => {
          res.data[1].forEach((item) => {
            if (el.o_OrganName == item.o_OrganName) {
              let personArr = {
                o_OrganName: item.o_OrganName,
                p_PersonName: item.p_PersonName,
                p_PersonID: item.p_PersonID,
                p_Telphone: item.p_Telphone,
                headImageUrl: item.headImageUrl
                  ? this.configData.baseUrl +
                    String(item.headImageUrl).split("/wwwroot")[1]
                  : "",
                active: false,
              };
              el.personList.push(personArr);
            }
          });
        });
        this.dataList = departmentList;
        this.dataList.forEach((el) => {
          el.personList.forEach((elItem) => {
            selectedDataList.forEach((item) => {
              if (item.p_PersonID == elItem.p_PersonID) {
                elItem.active = true;
                this.selectedDataList.push(elItem);
              }
            });
          });
        });
        this.personLoading = false;
      }
    },
    selectPerson(val) {
      let personActive = false;
      val.active = !val.active;
    },
    // 全选
    selectAll(item) {
      item.active = !item.active;
      item.personList.forEach((el) => {
        el.active = item.active;
      });
    },
  },
};
</script>

<style scoped lang="scss">
$activeColor: var(--bg-color, "#00aaff");

::v-deep .u-collapse-item__content__text {
  padding: 0;
}
::v-deep .u-list-item.u-list-item- .u-cell .u-line {
  border-bottom: 0 solid rgb(214, 215, 217) !important;
}
.bottomPage {
  width: 100%;
  position: fixed;
  bottom: 0;
  padding: 20rpx 30rpx 30rpx 30rpx;
  background-color: #fff;
  margin-top: 15rpx;
  display: flex;
  border-top: 8rpx solid #f1f1f1;
  align-items: center;
}
.dataBox {
  padding: 10rpx 0;
  border-bottom: 2rpx solid #ccc;
  min-height: 100rpx;
  display: flex;
  align-items: center;
}

.personBox {
  border-radius: 6rpx;
  text-align: center;
  background-color: #f0f0f0;
  color: #817582;
  padding: 20rpx 0;
  cursor: pointer;
  min-width: 200rpx;

  .name {
  }

  .phone {
    font-size: 24rpx;
    margin-top: 10rpx;
  }
}

.personBox {
  margin-right: 20rpx;
  margin-bottom: 10rpx;
}

.personBox.active {
  color: #fff;
  background-color: #3c9cff;
}

.department {
  .el-icon-star-on {
    color: #f0f0f0;
  }
}

.el-icon-star-on.active {
  color: #3c9cff;
}

.personItem {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
</style>
<style scoped>
page {
  background: #fff;
}
</style>